<template>
  <div id="certification">
    <Header :showheaderLeft="false" :showBack="true" :isTitle="true" :showTitle="true"></Header>
    <div class="rootMain">
      <div class="top">
        <div class="success"></div>
        <h2>实名认证</h2>
        <p>请如实填写您的身份信息，一经认证不可修改。</p>
      </div>
      <div class="form">
        <div>
          <span>真实姓名</span>
          <div>
            <input type="text" v-model="name" placeholder="请输入真实姓名" />
          </div>
        </div>
        <div>
          <span>身份证号</span>
          <div>
            <input type="text" v-model="idcard" placeholder="请输入身份证号" />
          </div>
        </div>
      </div>
      <div class="ctrl">
        <div class="loginBtn" @click="goConfirm">提交认证</div>
        <!--<div class="cancelBtn" @click="$router.push(`/mine`)">取消</div>-->
      </div>
    </div>
    <van-popup v-model="show" class="loadingBox" :close-on-click-overlay="false">正在认证中...</van-popup>
  </div>
</template>
<script>
import Services from "@/service/index.js";
import { mapMutations, mapState } from "vuex";
import Header from "@/components/header";
import { Toast } from "vant";
//import { mapMutations } from "vuex";
export default {
  data() {
    return {
      loginToken: "",
      name: "",
      idcard: "",
      flag: true,
      show: false,
      userObj: {}
    };
  },
  created() {
    this.loginToken = localStorage.getItem("token")
      ? localStorage.getItem("token")
      : "";
    this.userObj = localStorage.getItem("userObj")
      ? JSON.parse(localStorage.getItem("userObj"))
      : "";
    this.changeTitle("实名认证");
  },
  components: { Header },
  computed: {},
  methods: {
    ...mapMutations(["changeTitle", "changetabbarIndex"]),
    goConfirm() {
      // console.log(this.flag);
      if (this.flag) {
        this.flag = false;
        if (this.name == "") {
          Toast("请输入姓名");
          this.flag = true;
          return;
        }
        if (this.idcard.length < 18) {
          Toast("请输入正确的身份证号码");
          this.flag = true;
          return;
        }
        this.show = true;
        Services.certify({
          token: this.loginToken,
          realName: this.name,
          idCardNo: this.idcard,
          lang: localStorage.getItem("language")
        }).then(res => {
          if (res.code == "0000") {
            Toast("实名认证成功");
            this.$set(this.userObj, "certified", 1);
            localStorage.setItem("userObj", JSON.stringify(this.userObj));
            this.$router.go(-1);
            Services.getUser({
              token: this.loginToken,
              lang: localStorage.getItem("language")
            }).then(res => {
              if (res.code == "0000") {
                let userObj = res.user;
                localStorage.setItem("userObj", JSON.stringify(userObj));
                this.show = false;
                this.toPage();
              }
            });
            this.show = false;
          } else {
            this.show = false;
            this.flag = true;
            Toast(res.msg);
          }
        });
        // setTimeout(() => {
        //   this.flag = true;
        //   Toast(this.flag)
        // }, 5000);
      }
    },
    toPage() {
      var getObj = JSON.parse(sessionStorage.getItem("toPage"));
      if (getObj) {
        this.$router.push(getObj.fullPath);
        sessionStorage.removeItem("toPage");
        return;
      } else {
        // 去执行默认操作
        if (localStorage.getItem("fromPage")) {
          if (localStorage.getItem("fromPage") != "my") {
            if (localStorage.getItem("fromPage1")) {
              if (this.$route.query.fromIOS == "ios") {
                this.$router.push(
                  `/goodsInfo?projectId=` +
                    localStorage.getItem("fromPage1") +
                    `&fromIOS=ios`
                );
              } else {
                this.$router.push(
                  `/goodsInfo?projectId=` + localStorage.getItem("fromPage1")
                );
              }

              localStorage.removeItem("fromPage1");
            } else {
              if (this.$route.query.fromIOS == "ios") {
                this.$router.push(
                  `/buynow?projectId=` +
                    localStorage.getItem("fromPage") +
                    `&fromIOS=ios`
                );
              } else {
                this.$router.push(
                  `/buynow?projectId=` + localStorage.getItem("fromPage")
                );
              }
            }
          } else {
            this.$router.push(`/mine`);
          }
        } else if (localStorage.getItem("my")) {
          this.$router.push(`/mine`);
          localStorage.removeItem("my");
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped type="text/scss">
#certification {
  width: 100%;
  height: 100%;
  background: #f8f8f8;
  .rootMain {
    box-sizing: border-box;
    padding: 0.3rem 0.2rem;
    padding-top: 1.08rem;
  }
  .top {
    text-align: center;
    background: #fff;
    padding: 0.3rem 0.25rem;
    border-radius: 0.1rem;
    .success {
      margin: 0 auto 0.15rem;
      width: 0.85rem;
      height: 1rem;
      background: url("~@/assets/img/mine/renzhengicon@2x.png") no-repeat center /
        100% 100%;
    }
    h2 {
      margin-bottom: 0.3rem;
      color: #242323;
      font-size: 0.3rem;
      font-weight: 500;
    }
    p {
      color: #242323;
      font-size: 0.18rem;
      line-height: 0.3rem;
    }
  }
  .form {
    margin-bottom: 2.5rem;
    > div {
      color: #242323;
      span {
        margin-left: 0.2rem;
        font-size: 0.24rem;
        height: 0.5rem;
        line-height: 0.5rem;
      }
      > div {
        height: 0.8rem;
        background: #fff;
        border-radius: 0.1rem;
        input {
          margin: 0;
          padding: 0 0.25rem;
          width: 100%;
          height: 100%;
          overflow: hidden;
          font-size: 0.3rem;
          font-weight: 500;
          border: none;
          outline: none;
        }
      }
    }
  }
  .ctrl {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    div {
      margin: 0 auto;
      margin-top: 0.3rem;
      width: 6.6rem;
      height: 0.85rem;
      line-height: 0.85rem;
      font-size: 0.32rem;
      letter-spacing: 0.05rem;
      text-align: center;
      border-radius: 0.1rem;
      color: #fff;
      background: linear-gradient(to left, #738aff, #5b60ff);
    }
  }
  .loadingBox {
    width: 130px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    background: #fff;
    color: #000;
    font-size: 16px;
    border-radius: 4px;
  }
}
</style>